<template>
    <div class="aside">
        <el-popover placement="right" width="220" trigger="click" :visible-arrow="false">
            <div style="margin: -12px; padding-top: 12px">
                <div style="display: flex; padding-bottom: 10px; margin: 0px 12px">
                    <el-upload
                        style="width: 52px; height: 52px; border-radius: 6px"
                        :action="action"
                        :headers="headers"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <el-avatar
                            style="cursor: pointer; width: 52px; height: 52px; border-radius: 6px"
                            shape="square"
                            :src="avatar"
                            @error="error"
                        >
                            <div style="background: #007fff; font-size: 16px; line-height: 52px">
                                {{ name | obtainAlias }}
                            </div>
                        </el-avatar>
                    </el-upload>
                    <div style="margin-left: 10px">
                        <div style="font-weight: bold">{{ name }}</div>
                    </div>
                </div>
                <div
                    style="
                        padding-left: 12px;
                        height: 36px;
                        line-height: 36px;
                        border-top: 1px solid #e0e1e2;
                        color: #333;
                        display: flex;
                        align-items: center;
                    "
                    @click="showPasswordDialog"
                >
                    <i class="el-icon-link" style="font-size: 18px; margin-right: 5px"></i>修改密码
                </div>
            </div>
            <el-avatar class="avatar" shape="square" :src="avatar" @error="true" slot="reference">
                <div style="background: #007fff; font-size: 12px; line-height: 40px">{{ name | obtainAlias }}</div>
            </el-avatar>
        </el-popover>
        <div
            :style="{
                'margin-top': '15px',
                'margin-left': '7px',
                cursor: 'pointer',
                width: '48px',
                height: '48px',
                'border-radius': '4px',
                background: command === 'chat' ? '#4c83cc' : '',
                display: 'flex',
                'flex-direction': 'column',
                'justify-content': 'center',
                'align-items': 'center'
            }"
            @click="handleCommand('chat')"
        >
            <el-badge :value="unread" :max="99" :hidden="unread == 0">
                <i
                    class="el-icon-chat-round"
                    :style="{ 'font-size': '22px', color: command === 'chat' ? '#fff' : '#AFC8E8' }"
                ></i>
            </el-badge>
            <span
                :style="{
                    'font-size': '10px',
                    color: command === 'chat' ? '#fff' : '#AFC8E8',
                    'margin-top': '3px'
                }"
                >消息</span
            >
        </div>
        <div
            :style="{
                'margin-top': '10px',
                'margin-left': '7px',
                cursor: 'pointer',
                width: '48px',
                height: '48px',
                'border-radius': '4px',
                background: command === 'contact' ? '#4c83cc' : '',
                display: 'flex',
                'flex-direction': 'column',
                'justify-content': 'center',
                'align-items': 'center'
            }"
            @click="handleCommand('contact')"
        >
            <i
                class="el-icon-user"
                :style="{
                    'font-size': '22px',
                    color: command === 'contact' ? '#fff' : '#AFC8E8'
                }"
            ></i>
            <span
                :style="{ 'font-size': '10px', color: command === 'contact' ? '#fff' : '#AFC8E8', 'margin-top': '3px' }"
                >通讯录</span
            >
        </div>
        <div
            :style="{
                'margin-top': '10px',
                'margin-left': '7px',
                cursor: 'pointer',
                width: '48px',
                height: '48px',
                'border-radius': '4px',
                background: command === 'calendar' ? '#4c83cc' : '',
                display: 'flex',
                'flex-direction': 'column',
                'justify-content': 'center',
                'align-items': 'center'
            }"
            @click="handleCommand('calendar')"
        >
            <i
                class="el-icon-date"
                :style="{
                    'font-size': '22px',
                    color: command === 'calendar' ? '#fff' : '#AFC8E8'
                }"
            ></i>
            <span
                :style="{ 'font-size': '10px', color: command === 'calendar' ? '#fff' : '#AFC8E8', 'margin-top': '3px' }"
                >日历</span
            >
        </div>
        <div style="margin-top: 20px; cursor: pointer; position: absolute; left: 19px; bottom: 18px">
            <i class="el-icon-switch-button" style="font-size: 24px; color: #afc8e8" @click="handleQuit"></i>
        </div>
        <!--修改密码界面-->
        <el-dialog
            title="修改密码"
            width="520px"
            :visible.sync="passVisible"
            :close-on-click-modal="false"
            append-to-body
        >
            <el-form :model="passForm" label-width="80px" :rules="passFormRules" ref="passForm">
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input
                        type="password"
                        v-model="passForm.oldPassword"
                        clearable
                        placeholder="请输入旧密码"
                        show-password
                    ></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input
                        type="password"
                        v-model="passForm.newPassword"
                        clearable
                        placeholder="请输入新密码"
                        show-password
                    ></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="morePass">
                    <el-input
                        type="password"
                        v-model="passForm.morePass"
                        clearable
                        placeholder="请输入确认密码"
                        show-password
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="passVisible = false">取消</el-button>
                <el-button type="primary" @click.native="passSubmit">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        command: {
            type: String
        }
    },
    data() {
        var checkAge = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.passForm.newPassword) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        var checkOld = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码！'))
            } else if (value == this.passForm.oldPassword) {
                callback(new Error('新密码不能与旧密码一样'))
            } else {
                callback()
            }
        }
        return {
            action: this.$axios.defaults.baseURL + 'upload/putObject/oss',
            headers: {
                Authorization: window.localStorage.getItem('Authorization')
            },
            unread: 0,
            passVisible: false,
            passForm: {
                oldPassword: '',
                newPassword: '',
                morePass: ''
            },
            passFormRules: {
                oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    {
                        pattern: /(?=.*[a-z])(?=.*\d)(?=.*[^a-z0-9])[\S]{8,}/i,
                        message: '密码必须包含字母、数字和特殊字符，且长度至少8位',
                        trigger: 'blur'
                    },
                    { validator: checkOld, trigger: 'blur' }
                ],
                morePass: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { validator: checkAge, trigger: 'blur' }
                ]
            },
            avatar: localStorage.getItem('avatar'),
            error: true
        }
    },
    filters: {
        obtainAlias(value) {
            if (value.length <= 2) {
                return value
            } else {
                return value.substring(value.length - 2, value.length)
            }
        }
    },
    computed: {
        name() {
            return localStorage.getItem('name')
        }
    },
    mounted() {
        this.$bus.$on('update', (data, index) => {
            let unread = 0
            for (let i = 0; i < data.length; i++) {
                unread = unread + data[i].unread
            }
            this.unread = unread
        })
    },
    beforeDestroy() {
        this.$bus.$off('update')
    },
    methods: {
        handleCommand(command) {
            this.$emit('update:command', command)
        },
        handleQuit() {
            this.$router.push('/')
        },
        showPasswordDialog() {
            this.passVisible = true
            if (this.$refs.passForm) {
                this.$refs.passForm.resetFields()
            }
        },
        passSubmit() {
            this.$refs.passForm.validate(valid => {
                if (valid) {
                    this.$axios.post('user/updatePassword', this.passForm).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success('修改成功')
                            this.$router.push('/login')
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }
            })
        },
        beforeAvatarUpload(file) {
            const suffix = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
            // 图片格式
            const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
            let result = imglist.find(item => item === suffix)
            if (!result) {
                this.$message.error('请上传图片类型')
                return false
            }
        },
        handleAvatarSuccess(res, file) {
            if (res.code == 200) {
                this.updateAvatar(res.data)
            }
        },
        async updateAvatar(avatar) {
            let params = {
                avatar: avatar
            }
            let res = await this.$axios.post('user/updateAvatar', params)
            if (res.data.code == 200) {
                localStorage.setItem('avatar', avatar)
                this.avatar = avatar
                this.error = false
            }
        }
    }
}
</script>
<style scoped>
::v-deep .el-badge__content {
    height: 14px;
    line-height: 14px;
    padding: 0 4px;
}
.aside {
    width: 62px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    text-align: center;
    position: relative;
    background: #3975c6;
}
.avatar {
    margin-top: 20px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 6px;
}
</style>
